<template>
  <div class="submitinfo-body"
       v-loading="loading"
       element-loading-text="正在提交中">
       <div class="left-box">
       <el-tabs type="border-card"
             v-model="activeTab">
      <el-tab-pane label="题目描述"
                   name="1">
        <el-scrollbar style="height:850px">
        <div class="title-box">
          <h1 class="title-font">
            {{this.dataProblemDetail.title?this.dataProblemDetail.title:'题目'}}
          </h1>
          时间限制: <el-tag type="info">{{this.dataProblemMain.timeLimit?this.dataProblemMain.timeLimit:'0MS'}}</el-tag>
          内存限制:<el-tag type="info">{{this.dataProblemMain.memoryLimit?this.dataProblemMain.memoryLimit:'0KB'}}</el-tag>
          <br />64位Integer的IO类型:<el-tag type="info">{{this.dataProblemMain.intFormat?this.dataProblemMain.intFormat:'-'}}</el-tag>
        </div>
        <div v-if="this.$store.getters.getIsLogin">
          <el-link v-if="this.isSolved"
                   type="success"
                   icon="el-icon-check">已解决</el-link>
          <el-link v-else
                   type="danger"
                   icon="el-icon-close">未解决</el-link>
          | <el-link v-if="!this.problemIsStar"
                   type="primary"
                   icon="el-icon-star-off">点击收藏</el-link>
          <el-link v-else
                   icon="el-icon-star-on">已收藏</el-link>
          | <el-link type="warning"
                   v-if="this.dataProblemDetail.judgeOption===0"> 本地判题</el-link>
          <el-link type="danger"
                   v-else> 第三方判题</el-link>
          | <el-link type="danger"
                   v-if="this.dataProblemMain.spj===1">特判</el-link>
          <el-link type="success"
                   v-else>结果匹配</el-link>
        </div>
        <el-card id="problem-card"
                 class="problem-detail-card">
          <div slot="header">题目描述</div>
          <div class="detail-card-body"
               v-html="this.dataProblemMain.description?this.dataProblemMain.description:'【没有描述】'"></div>
        </el-card>
        <el-card id="problem-card"
                 class="problem-detail-card">
          <div slot="header">输入</div>
          <div class="detail-card-body"
               v-html="this.dataProblemMain.input?this.dataProblemMain.input:'【没有输入】'"></div>
        </el-card>
        <el-card id="problem-card"
                 class="problem-detail-card">
          <div slot="header">输出</div>
          <div class="detail-card-body"
               v-html="this.dataProblemMain.output?this.dataProblemMain.output:'【没有输出】'"></div>
        </el-card>
        <div v-for="item in this.dataProblemSamples"
             :key="item.caseOrder">
          <el-card id="problem-card"
                   class="problem-detail-card">
            <div slot="header">输入样例 {{item.caseOrder===0?null:item.caseOrder+1}}</div>
            <div class="detail-card-body"
                 v-html="item.inputCase?item.inputCase:'【没有输入样例】'"></div>
          </el-card>
          <el-card id="problem-card"
                   class="problem-detail-card">
            <div slot="header">输出样例 {{item.caseOrder===0?null:item.caseOrder+1}}</div>
            <div class="detail-card-body"
                 v-html="item.outputCase?item.outputCase:'【没有输出样例】'"></div>
          </el-card>
        </div>
        <!-- <el-card id="problem-card"
                 class="problem-detail-card">
          <div slot="header">题目统计信息
            <el-link type="info"
                     class="elcard-showmore-link">查看更多</el-link>
          </div>
          <div class="detail-card-body">
            <div class="echarts-box"
                 id="submit-echarts"></div>
            <div class="echarts-box"
                 id="acuser-echarts"></div>
          </div>
        </el-card> -->
      </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="题解"
                   name="2">
        <div class="slovedbox-header">
        <el-button class="getallanalysis-button" type="primary" @click="getallanalysis">全部题解</el-button>
        <el-button class="findsloved-button" type="primary" icon="el-icon-search" @click="getanalysis">搜索</el-button>
        <el-input class="findsloved-text" v-model="findsolved" placeholder="请输入内容"></el-input>
        <el-button class="writesloved-button"
                   type="primary"
                   icon="el-icon-edit"
                   v-if="writesloved===false && showanalysis===false"
                   @click="dowritesloved">写题解</el-button>
        </div>
        <el-divider></el-divider>
        <!-- 以下是题解框 -->
        <el-scrollbar class="problem-analysis">
        <div  class="analysis"
              v-for="(items,index) in analysis" :key="index"
              @click="getthisanalysis(items.id)"
               >
          <div class="userinfo-header">
            <img class="avatar-img"
                 :src="items.avatarUrl"
                 @click="toUser(items.author)" />
             <span class="user-name"
                   @click="toUser(items.author)"
                   >{{items.nickname}}</span>
             <span class="analysis-time">{{items.time}}</span>
          </div>
          <div class="analysistitle-box">
            <span class="analysis-title">{{items.title}}</span>
          </div>
          <div class="analysistext-box">
            <span class="analysis-text">{{items.preview}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <el-pagination layout="prev, pager, next"
                       :current-page="this.currentPage"
                       @current-change="switchPage"
                       :total="this.total"
                       :page-size="this.pageSize"></el-pagination>
        </el-scrollbar>
        <!-- 到此结束 -->
      </el-tab-pane>
      <el-tab-pane label="提交记录"
                   name="3">
      <SubmitStatus :pid="this.pid" ref="SubmitStatus"></SubmitStatus>
      </el-tab-pane>
       </el-tabs>
       </div>
       <div class="right-box">
         <!-- 代码编辑器框 -->
         <div class="submit-box" v-if="writesloved===false && showanalysis===false">
          <div class="submit-header" >
            <div class="select">
            <el-select class="language-select"
                       size="medium"
                       v-model="compileLanguage"
                       @change="this.handleChangeLanguage"
                       :disabled="!this.$store.getters.getIsLogin">
              <el-option v-for="(item,index) in languageType"
                         :key="index"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            </div>
            <div class="full">
            <el-button class="full-button"
                       icon="el-icon-full-screen"
                       type="primary"
                       size="mini"
                       round
                       plain
                       @click="fullEditor = true">全屏</el-button>
            </div>
          </div>
          <div class="submit-body" >
          <el-dialog :visible.sync="fullEditor"
                       custom-class="dialog-body"
                       :fullscreen="true">
              <aceEditor class="full-code-editor"
                         :language="this.compileLanguage"
                         :readOnly="!this.$store.getters.getIsLogin"
                         :isFull="true"
                         @input="getCode"
                         :value="this.code"></aceEditor>
            </el-dialog>
            <aceEditor id="ace-editor"
                       class="code-editor"
                       :language="this.compileLanguage"
                       :readOnly="!this.$store.getters.getIsLogin"
                       @input="getCode"
                       :value="this.code"></aceEditor>
          </div>
         </div>
         <!-- markdown框 -->
         <div class="submit-box" v-else-if="writesloved===true && showanalysis===false">
           <div class="submit-header" >
             <el-button class="close-button"
                        icon="el-icon-close"
                        @click="closewritebox"
                        circle></el-button>
           </div>
            <div v-if="this.isSolved">
            <el-input v-model="analysistitle" placeholder="请输入标题"></el-input>
            <markdownEditor :text="answerText"
                              @inputValue="getText"
                              @inputRender="getHtml">{{this.answerText}}</markdownEditor>
            </div>
         </div>
         <!-- 题解显示框 -->
          <div class="submit-box" v-else>
           <div class="submit-header" >
             <el-button class="close-button"
                        icon="el-icon-close"
                        @click="closeanalysis"
                        circle></el-button>
           </div>
            <div v-if="this.isSolved">
            <el-scrollbar class="thisanalysis-box">
              <div class="thisanalysis-header">
            <img class="avatar-img"
                 :src="thisanalysis[0].avatarUrl"
                 @click="toUser(thisanalysis[1].author)"/>
             <span class="user-name"
                   >{{thisanalysis[1].title}}</span>
                   <span class="up-time"
                   >{{thisanalysis[0].nickname}}     发布于:{{thisanalysis[1].time}}</span>
              </div>
              <el-divider></el-divider>
              <div class="markdown-body">
                <VueMarkdown :source="thisanalysis[1].content" v-highlight></VueMarkdown>
              </div>
            </el-scrollbar>
            </div>
         </div>

       </div>
       <div class="bottom-box">
         <div class="bottom-box2">
         <el-button  class="button-open" @click="drawer = true" type="primary" style="margin-left: 16px;">
         题目列表
         </el-button>
         <!-- <el-drawer
          :visible.sync="drawer"
          :direction="direction"
          :show-close="false"
          :size="size"
          :withHeader="false">
          <SubmitProblemList @inputdrawer="getdrawer"></SubmitProblemList>
          </el-drawer> -->
          <div class="submit-button-box" v-if="writesloved===false && showanalysis===false">
            <el-button class="submit-button"
                       type="primary"
                       @click="handleSubmit"
                       :disabled="!this.$store.getters.getIsLogin" v-preventClick>提交代码</el-button>
          </div>
          <div class="submit-button-box" v-else-if="writesloved===true && showanalysis===false">
            <el-button class="submit-button"
                       type="primary"
                       @click="submit"
                       :disabled="!this.$store.getters.getIsLogin">提交题解</el-button>
          </div>
          <!-- <div class="page-box">
            <el-button class="last-problem">上一题</el-button>
            <el-button class="next-problem">下一题</el-button>
          </div> -->
         </div>
       </div>
  </div>
</template>

<script>
import aceEditor from '@/components/AceEditor'
import markdownEditor from '@/components/MarkDownEditor'
import echarts from 'echarts'
import echartStyle from '../../utils/echarts/shine.json'
import VueMarkdown from 'vue-markdown'
import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
import Vue from 'vue'
import SubmitStatus from './SubmitStatus'
import SubmitProblemList from './SubmitProblemList'
// 如果开启了typescript 需要额外安装 npm install @types/highlight.js
// 通过 import * as hljs from 'highlight.js' 引入
Vue.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})
// 也可以把这自定义指令封装 通过Vue.use()，来注入
export default {
  components: {
    aceEditor,
    markdownEditor,
    VueMarkdown, // 注入组件
    SubmitStatus,
    SubmitProblemList
  },
  props: {
    pid: String
  },
  data () {
    return {
      loading: false,
      drawer: false,
      direction: 'ltr',
      activeTab: '1',
      input: '',
      html: '',
      analysistitle: '',
      currentPage: 1,
      pageSize: 15,
      total: 0,
      size: '800px',
      active: '',
      writesloved: false,
      findsolved: '',
      analysis: [],
      thisanalysis: '',
      content: '',
      myChartSubmit: '',
      myChartsAcUser: '',
      dataProblemMain: '',
      dataProblemDetail: '',
      dataProblemSamples: [],
      isSolved: false,
      showanalysis: false,
      problemIsStar: false,
      code: '',
      count: 1,
      // 题解内容
      answerText: '# 第 ' + this.pid +
        ' 题题解\n \n \n \n#### Editor by :  ' +
        this.$store.getters.getUsername,
      fullEditor: false,
      compileLanguage: 'C',
      languageType: [
        {
          value: 'C',
          label: 'C'
        },
        {
          value: 'C++',
          label: 'C++'
        },
        {
          value: 'JAVA',
          label: 'JAVA'
        }
      ],
      pHard: '简单',
      problemHard: [
        {
          value: '简单',
          label: '简单'
        },
        {
          value: '中等',
          label: '中等'
        },
        {
          value: '困难',
          label: '困难'
        }

      ],
      activeIndex: ['1']
    }
  },
  watch: {
    pid (val) {
      this.getProblem()
    }
  },
  mounted () {
    // this.initEcharts()
    this.getProblem()
    this.getanalysis()
    if (!this.$store.getters.getIsLogin) {
      // this.activeIndex = []
      this.$notify({
        title: '提示',
        message: '登录后才能作答哦',
        type: 'warning',
        offset: 100,
        duration: 3000
      })
    } else {
      this.activeIndex.push('1')
    }
  },
  methods: {
    switchPage (val) {
      this.currentPage = val
      this.getanalysis()
    },
    handleFullScreen () {
      this.fullEditor = true
    },
    load () {
      this.count += 2
    },
    initEcharts () {
      let obj = echartStyle
      echarts.registerTheme('shine', obj)
      this.myChartSubmit = echarts.init(document.getElementById('submit-echarts'), 'shine')
      this.myChartSubmit.showLoading()
      this.myChartsAcUser = echarts.init(document.getElementById('acuser-echarts'))
      this.myChartsAcUser.showLoading()
    },
    async getProblem () {
      let params = new URLSearchParams()
      let pidTemp = this.pid
      params.append('problemId', pidTemp)
      params.append('username', this.$store.getters.getUsername)
      params.append('contestId', '')
      let dataProblem = await this.$http.post('/problem/info', params)
      this.dataProblemDetail = dataProblem.datas[0]
      this.dataProblemMain = dataProblem.datas[1]
      this.dataProblemSamples = dataProblem.datas[2]
      let usersolved = await this.$http.post('/problem/userSolved', params)
      this.isSolved = usersolved.datas[0]
      if (this.dataProblemSamples.length === 0) {
        this.dataProblemSamples[0] = {
          caseOrder: 0,
          inputCase: '',
          outputCase: ''
        }
      }
      // this.loadChartsSubmit()
      // this.loadChartsAcUser()
    },
    // 通过题目id获取题目题解
    async getanalysis () {
      let params = new URLSearchParams()
      let pidTemp = this.pid
      params.append('pageNum', this.currentPage)
      params.append('pageSize', this.pageSize)
      params.append('problemId', pidTemp)
      if (this.findsolved !== '') {
        params.append('titel', this.findsolved)
      }
      let dataanalysis = await this.$http.post('/problem/analysis/preview', params)
      this.analysis = dataanalysis.datas[0]
      this.total = dataanalysis.datas[1]
    },
    getallanalysis () {
      this.findsolved = ''
      this.getanalysis()
    },
    loadChartsSubmit () {
      let totalAc = this.dataProblemDetail.totalAc
      let others = this.dataProblemDetail.totalSubmit - this.dataProblemDetail.totalAc
      let option = {
        title: {
          text: '提交AC占比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['总AC数', '其他']
        },
        series: [
          {
            name: '总AC数/总提交数',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: totalAc, name: '总AC数' },
              { value: others, name: '其他' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.myChartSubmit.setOption(option)
      this.myChartSubmit.hideLoading()
    },
    loadChartsAcUser () {
      let totalAcUser = this.dataProblemDetail.totalAcUser
      let others = this.dataProblemDetail.totalSubmitUser - this.dataProblemDetail.totalAcUser
      let option = {
        title: {
          text: '提交人数占比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['通过数', '其他']
        },
        series: [
          {
            name: '通过人数/尝试次数',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: totalAcUser, name: '通过数' },
              { value: others, name: '其他' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.myChartsAcUser.setOption(option)
      this.myChartsAcUser.hideLoading()
    },
    async onSubmit () {
      let params = new URLSearchParams()
      params.append('problemId', this.pid)
      params.append('username', this.$store.getters.getUsername)
      params.append('code', this.code)
      params.append('language', this.compileLanguage)
      // FIXME: 暂时固定时间和内存限制
      params.append('timeLimit', 1000)
      params.append('memoryLimit', 128000)
      // 如果有本地判题标记，优先提交到本地
      let url = '/judge_status/submit'
      if (this.dataProblemDetail.judgeOption === 1) {
        url = '/judge_status/submit'
      } else {
        // url = '/submit/submitProblem'
      }
      // 跳转到测评页面
      let dataSubmitProblem = await this.$http.post(url, params)
      this.logger.i(dataSubmitProblem.datas)
      if (dataSubmitProblem.code === 10000) {
        this.$message.success('提交成功！')
        this.loading = false
      } else {
        this.$message.error(dataSubmitProblem.msg)
        this.loading = false
      }
      this.$refs.SubmitStatus.refresh()
      // this.$router.push({ path: '/Status' })
    },
    async getthisanalysis (val) {
      let params = new URLSearchParams()
      params.append('id', val)
      let thisanalysis = await this.$http.post('/problem/analysis/info', params)
      this.thisanalysis = thisanalysis.datas
      this.showanalysis = true
      console.log(this.thisanalysis)
    },
    // 写题解记录
    async submit () {
      if (this.analysistitle !== '') {
        this.loading = true
        let params = new URLSearchParams()
        params.append('username', this.$store.getters.getUsername)
        params.append('title', this.analysistitle)
        params.append('content', this.content)
        params.append('problemId', this.pid)
        let dataSubmitAnalysis = await this.$http.post('/problem/analysis/add', params)
        if (dataSubmitAnalysis.code === 10000) {
          this.$message.success('题解提交成功！')
          this.analysistitle = ''
          this.answerText = '# 第 ' + this.pid +
          ' 题题解\n \n \n \n#### Editor by :  ' +
          this.$store.getters.getUsername
          this.writesloved = false
          this.loading = false
        } else {
          this.$message.error('题解提交失败！')
        }
      } else {
        this.$message.error('题解标题不能为空！')
      }
    },
    getCode (code) {
      this.code = code
    },
    // 获取文本信息
    getText (text) {
      this.content = text
    },
    // 获取html文本
    getHtml (html) {
      this.html = html
    },
    // 获取drawer
    getdrawer (drawer) {
      this.drawer = drawer
    },
    handleSubmit () {
      if (this.code.length <= 50) {
        this.$message.warning('提交空白代码是要打屁股的')
      } else {
        this.loading = true
        this.onSubmit()
        this.activeTab = '3'
      }
    },
    // 打开markdown
    dowritesloved () {
      this.writesloved = true
    },
    // 关闭markdown
    closewritebox () {
      this.writesloved = false
    },
    handleChangeLanguage (val) {
      this.compileLanguage = val
    },
    handleChangeHard (val) {
      this.problemHard = val
    },
    // 跳转到个人主页
    toUser (val) {
      this.$router.push({ path: '/User', query: { username: val } })
    },
    // 关闭题解
    closeanalysis () {
      this.showanalysis = false
    }
  }

}
</script>
<style scoped>
.submitinfo-body{
  border-right:1px solid rgb(228, 231, 237);
  border-left:1px solid rgb(228, 231, 237);
  border-bottom:1px solid rgb(228, 231, 237);
  height:1001.5px;
}
.left-box{
  float:left;
  width: 50%;
  height: 942px;
}
.right-box{
  float: right;
  width: 50%;
  height: 942px;
  border-bottom:1px solid rgb(228, 231, 237);
  border-top:1px solid rgb(228, 231, 237);
}
.bottom-box{
  float: right;
  width: 100%;
  height: 60px;
  bottom: 0px;
  background:rgb(255, 255, 255);
}
.bottom-box2{
  border-right:1px solid rgb(228, 231, 237);
  border-left:1px solid rgb(228, 231, 237);
  border-bottom:1px solid rgb(228, 231, 237);
  width: 100%;
  height: 100%;
}
.el-tabs.el-tabs--top.el-tabs--border-card {
  height: 942px;
}
.title-box {
  width: 100%;
  min-height: 120px;
  text-align: center;
}
.title-font {
  font-size: 31px;
}
#problem-card {
  margin-bottom: 10px;
  margin-right: 9px;
  box-shadow: none;
}
.el-card{
  border: none;
}
.button-open{
  float: left;
  margin-top: 10px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}
.submit-box{
  height: 942px;
  width: 100%;
  background-color: rgb(255, 255, 255);
}
.submit-header{
  height: 50px;
  width: 100%;
  background-color: rgb(247, 247, 247);
  border-bottom:1px solid rgb(228, 231, 237);
}
.submit-body{
  width: 100%;
  height: 891.5px;
  background:saddlebrown;
  overflow: scroll;
  overflow-x: hidden;
}
.language-select{
  width: 160px;
  margin-right: 10px ;
  margin-top: 8px;
}
.select{
  height:100%;
  width: 180px;
  float: left;
}
.full{
  float: right;
}
.full-button{
margin-top: 10px;
margin-right: 10px;
}
.full-code-editor {
  width: 100%;
  height: 100%;
}
.code-editor {
  width: 100%;
  height: 941.5px;
}
.submit-button-box{
  float: right;
  width: 150px;
  height: 100%;
}
.submit-button{
  margin-right: 5px;
  margin-top: 10px;
}
.page-box{
  width:200px;
  height:60px;
  position:absolute;
  left:50%;
  margin-left:-100px;
}
.next-problem{
  margin-top: 10px ;
}
.list-header{
  width: 100%;
  height: 70px;
  border-bottom:1px solid rgb(228, 231, 237);
}
.show-all-problem{
  background: rgb(38,38,38);
  margin-top: 15px;
  position: absolute;
  left: 30px;
  color: white;
}
.harder-select{
  margin-top: 17px;
}
.close-button{
  position: absolute;
  margin-top: 5px;
  right: 28px;
}
.findsloved-button{
  position: absolute;
  left:130px;
}
.findsloved-text{
  position: absolute;
  left:230px;
  width: 300px;
}
.getallanalysis-button{
  position: absolute;
  left:30px;
}
.slovedbox-header{
  width: 100%;
  height: 35px;
}
.writesloved-button{
  position: absolute;
  right:30px;
}
.problem-analysis{
  height: 790px;
}
.analysis{
  cursor: pointer;
  width: 100%;
  position:relative;
}
.userinfo-header{
  height: 60px;
  width: 100%;
}
.avatar-img{
  cursor: pointer;
  position:absolute;
  border: 3px solid #eeeeee;
  left:10px;
  border-radius: 180px;
  width: 50px;
  height: 50px;
}
.user-name{
  cursor: pointer;
  position: absolute;
  margin-top:20px;
  left:80px;
  font-size: 18px;
}
.analysistitle-box{
  height: 40px;
  width: 100%;
}
.analysistext-box{
  min-height: 40px;
  width: 100%;
}
.analysis-title{
  position: absolute;
  font-weight: 700;
  font-size: 20px;
  left:20px;
}
.analysis-text{
  position: absolute;
  left:20px;
  font-size: 17px;
}
.analysis-time{
  position: absolute;
  right:10px;
  top:20px;
  color: darkgrey;
}
.thisanalysis-box{
  position:relative;
  margin: 10px;
  height: 890px;
}
.thisanalysis-header{
  position: relative;
  width: 100%;
  height: 80px;

}
.markdown-body{
  text-align: left;
  position: relative;
  min-height: 810px;
}
.up-time{
  position: absolute;
  left: 10px;
  bottom: 3px;
  color: darkgrey;
}
.el-scrollbar /deep/.el-scrollbar__wrap{
  overflow-x: hidden;
}
.el-card /deep/.el-card__header {
    background: rgb(255, 255, 255);
}
.el-card /deep/.el-card__body{
  background-color: rgb(245, 245, 245);
}
.el-tabs /deep/.el-tabs__item {
    width: 150px;
    height: 50px;
    font-size:20px;
    color: rgb(147, 147, 147);
    margin-top: 1px;
    text-align: center;
}
.el-tabs /deep/.el-tabs__header.is-top {
    background-color: rgb(247, 247, 247);
}
.el-tabs /deep/.el-tabs__item:hover {
    color:  rgb(147, 147, 147) !important;
}
.el-tabs /deep/.el-tabs__item.is-active {
    color: #000000 !important;
}
.el-drawer /deep/ .el-drawer__body{
  color: rgb(38, 38, 38) !important;
}
</style>
